<template>
	<!-- 我的次卡 -->
	<view class="page">
		<view class="list" v-for="(item,index) in cardList" :key="index">
			<view class="list_l">
				<view class="title">￥{{$fn.twoToFixed(item.price/100)}}元<text class="price"></text> </view>
				<view class="unit">￥{{item.price/100/item.numberUses}}/次</view>
			</view>
			<view class="list_r">
				剩余{{item.remainingUses}}次
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "myCard",
		data() {
			return {
				cardList: []
			};
		},
		onLoad() {
			this.getUserCardList()
		},
		onShow() {},
		methods: {
			getUserCardList() {
				this.$api.getUserCardList().then(res => {
					console.log(res.data, "次卡列表")
					this.cardList = res.data
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.page {
		padding: 32rpx;
		box-sizing: border-box;
	}

	.list {
		background: linear-gradient(149deg, #000000 0%, #4D4D4D 100%);
		border-radius: 12rpx;
		padding: 24rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 20rpx;

		.list_l {

			.title {
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;

				.price {
					font-weight: 500;
				}
			}

			.unit {
				margin-top: 12rpx;
				font-weight: 400;
				font-size: 24rpx;
				color: #FFFFFF;
			}

		}

		.list_r {
			font-size: 24rpx;
			color: #01FFCC;
		}

	}
</style>